<template>
	<view>
		<view class="container">
			<view class="btn">
				<u-icon name="arrow-left" size="48" @click="gobtn" color="#ffffff"></u-icon>
			</view>
			<!-- 背景图片 -->
			<view class="bg-position">
				<image class="bg" :src="bg" mode="widthFix"></image>
				
			</view>
			<!-- 二维码 -->
			<view class="con u-text-center">
				<text class="u-font-32 u-line-1" v-if="userdetail.id > 0">用户”{{userdetail.name}}“的邀请码</text>
				<text class="u-font-32 u-line-1" v-else>登录后可邀请好友</text>
				<view class="img-con">
					<u-image :src="wxcode" mode="widthFix" width="280rpx" height="280rpx"></u-image>
					<!-- <u-lazy-load :image="wxcode" style="width: 280rpx;height: 280rpx;"></u-lazy-load> -->
				</view>
				<view class="u-flex u-p-t-10" v-if="userdetail.id > 0">
					<button class="u-reset-button iv-button" size="medium" open-type="share">邀请微信好友</button>
					<button class="u-reset-button iv-button" size="medium" @click="saveImg">保存图片分享</button>
				</view>
				<view class="u-flex" v-else>
					<button class="u-reset-button iv-button" size="medium" @click="isLogin('登录后可邀请好友')">邀请微信好友</button>
					<button class="u-reset-button iv-button" size="medium" @click="isLogin('登录后可保存图片发送邀请好友')">保存图片分享</button>
				</view>
				<view class="u-p-t-30">
					<text class="link" @click="inviteRecode">我的邀请记录</text>
				</view>
			</view>
			<!-- 规则说明 -->
			<view class="con">
				<view class="head">规则说明</view>
				<view class="text-item">
					<view class="u-flex">
						<text class="num"><text class="t">01</text></text>
						<text class="u-flex-1">点击“邀请微信好友”发送给好友，或点击“保存图片分享”发朋友圈进行好友邀请；</text>
					</view>
					<view class="u-flex">
						<text class="num"><text class="t">02</text></text>
						<text class="u-flex-1">新用户通过您分享的链接或扫二维码，注册后在小程序下单并完成回收，您将立即获得<text class="bold">{{webSetting.commissionsetting.user.firstorderamount}}元</text>现金奖励；</text>
					</view>
					<view class="u-flex">
						<text class="num"><text class="t">03</text></text>
						<text class="u-flex-1">活动开始时间为：2023年4月1日；</text>
					</view>
					<view class="u-p-t-20"><text class="u-tips-color">奖励说明：新用户是通过小程序下单且回收重量需≥10kg，才予以奖励；</text></view>
					<view class="u-p-t-20"><text class="u-tips-color">注：本活动最终解释权归广东猿收环保科技有限公司所有</text></view>
				</view>
			</view>
			<!-- 三步拿奖励 -->
			<view class="con">
				<view class="head">三步拿奖励</view>
				<view class="step3-item">
					<u-image :src="step3" mode="widthFix" width="503rpx"
						height="113rpx"></u-image>
				</view>
			</view>
		</view>
		<!-- 邀请记录 -->
		<u-popup v-model="show" mode="center" border-radius="12">
			<view class="invite-box u-p-30 u-w-660">
				<view class="u-text-center"><text class="u-font-32">邀请记录</text></view>
				<view class="bg-item">
					<view class="u-p-20">
						<view class="u-flex">
							<text class="tl u-font-32 u-flex-1 u-font-bold">已邀请新用户</text>
							<text class="u-font-32 u-font-bold">{{commission.total}}</text>
							<text class="u-font-20">人</text>
						</view>
						<view class="text-bg-item"><text>奖励将增加到您青猿小程序余额内</text></view>
					</view>
					<image :src="bg1" class="bg"></image>
				</view>
				<view class="invite-list">
					<view class="item u-border-bottom" v-for="(item,index) in commission.rows" :key="index">
						<view class="u-flex u-w-460">
							<u-avatar src="/" size="mini"></u-avatar>
							<view class="u-flex-1 u-p-l-20">
								<view><text class="u-font-bold">{{item.name}}</text></view>
								<view><text class="u-tips-color u-font-24">{{item.createdate}}</text></view>
							</view>
						</view>
						<view class="u-flex-1 u-text-center">
							<view><text class="num">{{item.amount}}</text></view>
							<view><text class="u-tips-color u-font-24">{{item.msg}}</text></view>
						</view>
					</view>
					<!-- <view class="item u-border-bottom">
						<view class="u-flex u-w-460">
							<u-avatar src="/" size="mini"></u-avatar>
							<view class="u-flex-1 u-p-l-20">
								<view><text class="u-font-bold">手机尾号5624</text></view>
								<view><text class="u-tips-color u-font-24">2023-01-01 12:00:00</text></view>
							</view>
						</view>
						<view class="u-flex-1 u-text-center">
							<view><text class="num">?</text></view>
							<view><text class="u-tips-color u-font-24">未下单</text></view>
						</view>
					</view>
					<view class="item u-border-bottom">
						<view class="u-flex u-w-460">
							<u-avatar src="/" size="mini"></u-avatar>
							<view class="u-flex-1 u-p-l-20">
								<view><text class="u-font-bold">手机尾号5624</text></view>
								<view><text class="u-tips-color u-font-24">2023-01-01 12:00:00</text></view>
							</view>
						</view>
						<view class="u-flex-1 u-text-center">
							<view><text class="num">-</text></view>
							<view><text class="u-tips-color u-font-24">违规失效</text></view>
						</view>
					</view> -->
				</view>
			</view>
		</u-popup>
		<!-- 弹出登录方式 -->
		<login-wechat :isWechat="isWechat" @close="closeLogin" @update="updateData"></login-wechat>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				bg: this.baseURL + '/invite/bg.png?v=1',
				bg1: this.baseURL + '/invite/bg1.png',
				step3: this.baseURL + '/invite/step3.png',
				wxcode: '',
				show: false,
				promotioncode: null,
				commission: {
					rows: [],
					total: 0
				},
				poster: '',
				isWechat: false
			}
		},
		computed: {
			...mapState({
				tabbar: state => state.tabbar,
				userdetail: state => state.userdetail,
				webSetting: state => state.webSetting
			})
		},
		onLoad(opt) {
			console.log('opt',opt)
			if(opt.promotioncode){
				uni.reLaunch({
					url: '/pages/login/login?promotioncode='+opt.promotioncode
				})
			}else{
				this.initData()
			}
		},
		onShareAppMessage(res) {
			this.isLogin().then(()=>{
				wx.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
				
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log('来自页面内分享按钮',res.target)
				}
				console.log('onShareAppMessage.imageUrl:',this.baseURL + '/invite/send.png')
				return {
					title: '废品变金元，就要找青猿！',
					path: '/pages/login/reg?promotioncode='+this.promotioncode,
					imageUrl: this.baseURL + '/invite/send.png',
					type: 0, //转发形式（0 - 微信小程序正式版 ；1 - 微信小程序开发版；2 - 微信小程序体验版）
				}
			}).catch(()=>{
				
			})
		},
		onShareTimeline: function() {
			return {
				title: '废品变金元，就要找青猿',
				query: {
					// key: 'value' //要携带的参数
					promotioncode: this.promotioncode
				},
				// imageUrl: this.baseURL + '/invite/send.png' //分享图,默认小程序的logo
			}
		},
		methods: {
			initData(){
				if(this.userdetail.id > 0){
					this.getWxcode()
					this.getCommissionList()
				}
			},
			gobtn(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getWxcode(){
				this.$u.post("/User/GetWxaCode").then((res)=>{
					this.promotioncode = res.promotioncode
					if(res.data.includes("errcode:")){
						uni.showModal({
							content: '生成推广码错误',
							showCancel:false
						})
						return
					}
					if(res.data.indexOf('微信小程序二维码生成失败') == 0){
						uni.showModal({
							content: res.data,
							showCancel:false
						})
						return
					}
					this.wxcode = this.fileURL+res.data
				}).catch((err)=>{
					console.log('err',err)
					if(err.data.status == 2){
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				})
			},
			getCommissionList(){
				this.$u.post("/User/Order/CommissionList",{
					pageIndex: 1,
					pageSize: 999,
					promotionUserType: 1,
					promoterUserId: this.userdetail.id,
					UserBillType: '推广首单'
				}).then((res)=>{
					this.commission = res
				})
			},
			saveImg(){
				// this.$u.get("/User/GetPromotionPoster").then((res)=>{
				// 	console.log(res)
				// 	this.poster = res
					
				// 	uni.downloadFile({
				// 		url: this.poster,
				// 		header:{
				// 			Authorization:uni.getStorageSync('lifeData').Authorization
				// 		},
				// 		success: (res) => {
				// 			wx.showShareImageMenu({
				// 				path: res.tempFilePath
				// 			})
				// 		}
				// 	})
				// })
				
				uni.downloadFile({
					url: this.baseURL+"/User/GetPromotionPoster",
					header:{
						Authorization:uni.getStorageSync('lifeData').Authorization
					},
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath,
							fail: (res) => {
								if(res.errMsg != 'showShareImageMenu:fail cancel'){
									uni.showToast({
										title: '图片保存失败，请稍后再试',
										icon: 'none'
									})
								}
							}
						})
					}
				})
			},
			inviteRecode(){
				this.isLogin('请登录后查看邀请记录').then(()=>{
					this.show = true
				}).catch(()=>{
					
				})
			},
			isLogin(text = ''){
				if(this.userdetail.id > 0){
					console.log('已登录')
					return Promise.resolve()
				}else{
					console.log('未登录')
					if(text){
						uni.showModal({
							title: '提示',
							content: text,
							success: (res) => {
								if (res.confirm) {
									this.isWechat = true
								} else if (res.cancel) {
									
								}
							}
						})
					}else{
						this.isWechat = true
					}
					
					return Promise.reject()
				}
			},
			closeLogin(val) {
				this.isWechat = val
			},
			updateData(token) {
				this.initData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 340rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		height: 2047rpx;
		width: 750rpx;
		position: relative;
		.btn{
			position: absolute;
			top: 5.5%;
			left: 4%;
		}
		.bg-position {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.bg {
			display: flex;
			height: 1847rpx;
			width: 750rpx;
		}

		.con {
			background-color: #fff;
			padding: 30rpx;
			margin: 30rpx;
			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
			border-radius: 24rpx;
			position: relative;

			&+.con {
				margin-top: 30rpx;
			}

			.img-con {
				margin: 20rpx auto;
				display: flex;
				justify-content: center;
			}

			.iv-button {
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 50rpx;
				padding: 0 40rpx;
				background-image: linear-gradient(to right, #00a3c8, #63c2c3);
				color: #fff;
				&:active{
					opacity: 0.8;
				}
			}

			.link {
				color: $u-color-blue;
				&:active{
					opacity: 0.8;
				}
			}

			.head {
				display: inline-block;
				height: 68rpx;
				line-height: 68rpx;
				color: #fff;
				background-image: linear-gradient(to right, #00a3c8, #63c2c3);
				// width: 120px;
				margin-left: -32rpx;
				font-size: 32rpx;
				padding: 0 40rpx;
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}

			.text-item {
				.u-flex {
					margin-top: 20rpx;
					align-items: flex-start;
				}

				.num {
					font-weight: bolder;
					margin-right: 20rpx;
					position: relative;

					&:after {
						content: '';
						display: block;
						width: 100%;
						height: 10rpx;
						background-color: #f5e929;
						position: absolute;
						bottom: 8rpx;
						z-index: 1;
					}

					.t {
						position: relative;
						z-index: 2;
					}
				}

				.bold {
					font-weight: bold;
					color: $u-color-orange;
				}
			}

			.step3-item {
				padding: 20rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.invite-box{
		max-height: 80vh;
		.bg-item{
			position: relative;
			color: #fff;
			margin: 30rpx 0;
			.bg{
				width: 600rpx;
				height: 143rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
			.tl{
				
			}
			.text-bg-item{
				background-color: #1699bc;
				padding: 10rpx;
				border-radius: 10rpx;
				display: inline-block;	
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
		
		.invite-list{
			
			.item{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				.num{
					color: $u-color-orange;
					font-weight: bold;
				}
			}
		}
	}
</style>